Bubbleで作るWebアプリにAuth0を使ってログアウトできるのか

前回の記事の続きをやっていこうかと思います

Auth0を使ってログインすることはできました。

ログインユーザーの画像やニックネームを表示させていましたが、今回はログアウト処理も実装してみたいと思います。

ボタンの表示非表示

現状、ログインしたときの画面は上記の画像の通りです。ログインボタンが残ったままになっているので、これを非表示にしてみます。

ユーザーがBubbleのアプリにログインしている時に非表示にする　というフローにしてみます。

ログインボタンをダブルクリックして、Start/Edit workflowをクリックしてworkflowの編集画面にいきます。

workflowのイベントをUser is logged inにします。

stepをElement ActionsのHide an elementにします。

HideにするElementにはログインボタンを選択します。　

これでログイン時にログインボタンを非表示にする　というworkflowは完成です。 ではPreviewで確認してみます。

上記画像のようにボタンが消えていれば成功です。

ページロード時にログイン状態だったらボタンを非表示にする というフローであれば、

workflowのイベントをPage is loaded, HideにするElementのOnly whenで条件を指定すれば同じことができます。

条件は　Current user is logged in です。

ログアウトボタンを実装

ログイン時にログインボタンを非表示にできたので、次はログアウトボタンを表示させてみます。

デザイン編集画面でボタンを選択してアプリの画面に置きます。

ログアウトボタンをクリックした時のworkflowで、Log the user outを選択します。

これはBubbleアプリからログアウトする処理になります。

Auth0からログアウトする処理も入れます。

BubbleアプリからログアウトのStepの後に、Navigation->Open an external website を選択します。

Destinationの箇所に、Auth0アプリケーションのログアウトURLを記述しましょう。

URLの形式ですが、

https://<<Auth0のテナント名>>.auth0.com/v2/logout?client_id=<<Auth0アプリのClient id>>&returnTo=<<ログアウト後のページURL>>

となります。

これでログアウトのフローが完成したので、Previewで動作を確認してみます、

ちょっとわかりにくいですが、記事通りに作っていると、

ログアウトボタンを押した後は最終的に設定したログアウト後のページにリダイレクトされ、ログインボタンが表示されているはずです。

ログインボタンを押して、Auth0のログイン画面が表示されると、Auth0からログアウトする処理が成功しています。

ログインしていないときもログアウトボタンが表示されたままになっているので、

Current User isn't logged in を条件にして非表示にします。

するともログイン時はログインボタンだけの表示になるはずです。

最後に

ログインからログアウトの流れは以下のようになりました。